<template>
  <div style="height:100vh;background: #fff;">
    <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
      <van-swipe-item>
        <img src="@/assets/caiwu.png" alt="" width="100%" height="180px">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/keyan.png" alt="" width="100%" height="180px">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/guoji.png" alt="" width="100%" height="180px">
      </van-swipe-item>
    </van-swipe>
    <van-grid :gutter="10" :column-num="2">
      <van-grid-item>
        <div class="ts-p">
          <div style="  padding: 10px;">
            <p class="my-bl">我的办理</p>
            <p class="">我的办理</p>
            <div class="ts">问答</div>
          </div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="ts-p sl-p"></div>
      </van-grid-item>
    </van-grid>
    <!-- <div class="tz">
      <div class="tz-top">
        <h5>我的代办</h5>
        <span>更多代办</span>
      </div>
      <div class="tz-con">
        <div class="tz-item">
          <div class="item-left">
            <p class="left-title">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwqey</p>
            <p class="left-det">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwqey</p>
          </div>
          <div class="item-right">
            <img src="@/assets/guoji.png" alt="" width="100%" height="80px">
          </div>
        </div>
      </div>
    </div> -->
    <div style="display: flex;justify-content: space-around;">
      <img :src="item" alt="" v-for="(item,index) in imgs" :key="item" width="30%" @click="showPreview(index)">
    </div>
    <van-image-preview
        :images="imgs"
        v-model="show"
        :startPosition="currentIndex"
        :class-name="'custom-image-preview'"
      />
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      currentIndex:0,
      show:false,
      imgs: [require('@/assets/caiwu.png'), require('@/assets/keyan.png'), require('@/assets/guoji.png'), require('@/assets/logo.png')]
    }
  },
  methods:{
    showPreview(index){
      this.currentIndex = index
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.my-swipe {
  margin-bottom: 15px;
}

.ts-p {
  height: 150px;
  background: #73AEF9;
  width: 100%;
  border-radius: 10px;
  color: #fff;

}

.sl-p {
  background: #FF8F8F;
}

::v-deep .van-grid-item__content {
  padding: 0 !important;
  background: transparent;
}

.tz {
  border: 1px #ccc solid;
  height: calc(100% - 413px);
  margin: 15px 10px 0 10px;

  .tz-top {
    border-bottom: 1px #ccc solid;
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;
  }

  .tz-item {
    display: flex;
    justify-content: space-between;
    padding: 5px;

    .item-left {
      width: 60%;

      .left-title {

        font-size: 20px;
        margin-bottom: 2px;
      }

      .left-det {
        font-size: 14px;
        color: #b3b2b2;
      }

      p {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .item-right {
      width: 35%;

      img {
        border-radius: 5px;
      }
    }
  }
}
</style>
